<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入用户名" suffix-icon="el-icon-search" v-model="username"></el-input>
      <el-button style="margin-left: 5px;" type="primary" @click="loadLogs">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <el-table :data="logs" border :header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%">
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="logRole" label="角色" align="center">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.logRole == 'ROLE_ADMIN'">{{ scope.row.logRole }}</el-tag>
          <el-tag type="success" v-show="scope.row.logRole == 'ROLE_USER'">{{ scope.row.logRole }}</el-tag>
          <el-tag type="warning" v-show="scope.row.logRole == 'ROLE_VISITORS'">{{ scope.row.logRole }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="loginTime" label="登录时间" align="center"></el-table-column>
      <el-table-column prop="loginIp" label="登录IP" align="center"></el-table-column>
      <el-table-column prop="status" label="登录状态" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1 ">登录成功</el-tag>
          <el-tag type="danger" v-else>登录失败</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 15, 20, 35]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      logs: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      username: '',
    }
  },
  mounted () {
    this.loadLogs()
  },
  methods: {
    loadLogs () {
      this.request.get("/api/logs", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username
        }
      }).then(res => {
        console.log(res);
        this.logs = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange (pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.loadLogs()
    },
    handleCurrentChange (pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.loadLogs()
    },
    reset () {
      this.username = ""
      this.loadLogs()
    },
  }
}
</script>
